<template>
  <div>
    <el-form ref="aclModuleAddForm" :model="aclModuleAddForm" :rules="rulesAclModuleAddForm" status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="菜单名称:" class="name" prop="sysAclName">
        <el-input v-model="aclModuleAddForm.sysAclName" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父菜单id:" class="name" prop="sysAclParentIdStr">
        <el-input v-model="aclModuleAddForm.sysAclParentIdStr" class="input" :disabled="!disabled" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="父菜单名称:" class="name">
        <el-select v-model="aclModuleAddForm.sysAclParentIdStr" class="input" :disabled="disabled" placeholder="请输入内容" @change="parentIdChange">
          <el-option
            v-for="item of aclParentDetailSelect"
            :key="item.uuid"
            :label="item.sysAclName"
            :value="item.idStr"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单URL:" class="name">
        <el-input v-model="aclModuleAddForm.sysAclUrl" class="input" :disabled="disabled" placeholder="请输入菜单URL" autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单系统码:" prop="sysAclPermissionCode">
        <el-input v-model="aclModuleAddForm.sysAclPermissionCode" class="input" :disabled="!disabled" placeholder="请输入菜单系统码" autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单类型:" prop="sysAclType">
        <el-radio v-model="aclModuleAddForm.sysAclType" :label="-1" :disabled="disabled">系统</el-radio>
        <el-radio v-model="aclModuleAddForm.sysAclType" :label="0" :disabled="disabled">目录</el-radio>
        <el-radio v-model="aclModuleAddForm.sysAclType" :label="1" :disabled="disabled">菜单</el-radio>
        <el-radio v-model="aclModuleAddForm.sysAclType" :label="2" :disabled="disabled">按钮</el-radio>
        <el-radio v-model="aclModuleAddForm.sysAclType" :label="3" :disabled="disabled">其他</el-radio>
      </el-form-item>
      <el-form-item label="按钮动作:" class="name">
        <el-input v-model="aclModuleAddForm.sysAclAction" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属页面:" class="name">
        <el-input v-model="aclModuleAddForm.sysAclRouter" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单排序:" class="name" prop="sysAclSeq">
        <el-input-number v-model="aclModuleAddForm.sysAclSeq" :disabled="disabled" :min="1" :max="999999999" />
      </el-form-item>
      <el-form-item label="菜单状态" prop="disabledFlag">
        <el-radio v-model="aclModuleAddForm.disabledFlag" class="input radio" :disabled="disabled" :label="0" border size="medium">启用</el-radio>
        <el-radio v-model="aclModuleAddForm.disabledFlag" class="input radio" :disabled="disabled" :label="1" border size="medium">禁用</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loadingAclAdd" @click="submitFormAclModuleAdd('aclModuleAddForm')">提交</el-button>
        <el-button @click="resetFormaclModuleAdd('aclModuleAddForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { save } from '@/api/momo/SysAcl'
import { success } from '@/utils/tip'
export default {
  name: 'AclAdd',
  props: {
    aclAddToChild: {}
  },
  data() {
    var validatesysAclSeq = (rule, value, callback) => {
      if (!(/(^[1-9]\d*$)/.test(value))) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      loadingAclAdd: false,
      aclAddToChildDetail: {},
      aclModuleAddParentDetailSelect: [],
      aclParentDetailSelect: [],
      disabled: false,
      aclAddToChildData: {},
      aclModuleAddForm: {
        id: null,
        sysAclName: '',
        uuid: '',
        sysAclUrl: '',
        sysAclParentIdStr: '',
        sysAclType: 2,
        sysAclSeq: 1,
        sysAclPermissionCode: '',
        sysAclAction: '',
        sysAclRouter: '',
        disabledFlag: 0
      },
      rulesAclModuleAddForm: {
        sysAclName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        sysAclPermissionCode: [
          { required: true, message: '请输入菜单系统码', trigger: 'blur' }
        ],
        sysAclType: [
          { required: true, message: '请输入菜单类型', trigger: 'blur' }
        ],
        sysAclAction: [
          { required: true, message: '请输入按钮动作', trigger: 'blur' }
        ],
        sysAclStatus: [
          { required: true, message: '请选择菜单状态', trigger: 'blur' }
        ],
        sysAclRouter: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        sysAclParentIdStr: [
          { required: true, message: '请输入父菜单id', trigger: 'blur' }
        ],
        sysAclSeq: [
          { required: true, message: '排序必填', trigger: 'blur' },
          { validator: validatesysAclSeq, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    aclAddToChild: {
      deep: true,
      immediate: false,
      handler() {
        const data = JSON.parse(JSON.stringify(this.aclAddToChild))
        this.aclParentDetailSelect = data.fatherAclList
        this.aclModuleAddForm.sysAclPermissionCode = data.currentClickAcl.sysAclPermissionCode
        this.aclModuleAddForm.sysAclParentIdStr = data.currentClickAcl.idStr
      }
    }
  },
  methods: {
    submitFormAclModuleAdd(formName) {
      this.$refs[formName].validate((valid) => {
        this.loadingAclAdd = true
        if (valid) {
          this.loadingAclAdd = true
          save(this.aclModuleAddForm).then(res => {
            res = res.data
            success(res)
            this.loadingAclAdd = false
            this.$emit('aclAddToFather', {})
          }).catch(errored => {
            this.loadingAclAdd = false
          }).finally(() => {
            this.loadingAclAdd = false
          })
        } else {
          console.log('error submit!!')
          this.loadingAclAdd = false
          return false
        }
      })
    },
    resetFormaclModuleAdd(formName) {
      this.$refs[formName].resetFields()
    },
    parentIdChange(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>
